<template>
  <div class="msgOrder">
    <!-- ========修改弹窗======-->
    <!--、、信息员订单：递交合同-->
    <div>
      <el-dialog
        title="递交合同"
        width="40%"
        class="fns-el-dialog"
        :close-on-click-modal="false"
        :visible.sync="+updateMsg.code === 3 || +updateMsg.code === 10"
        :before-close="handleClose">
        <!--// body-->
        <div :span="24">
          <el-form ref="formData1" :model="form1" :rules="rules" label-width="110px" style="margin-left:6px;">
            <el-row>
              <el-col :span="11">
                <el-form-item label="订单编号：">
                  <el-input v-model="form1.orderCode" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item label="经手销售：">
                  <el-input v-model="form1.saleName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="经纪人：" >
                  <el-input v-model="form1.brokerName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item label="联系人姓名：">
                  <el-input v-model="form1.contactName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

           <el-row>
             <el-col :span="11">
               <el-form-item label="联系电话：">
                 <el-input v-model="form1.contactPhone" placeholder="" disabled></el-input>
               </el-form-item>
             </el-col>

             <el-col :span="11" :offset="1">
               <el-form-item label="回寄快递单号：">
                 <el-input v-model="form1.contractBackCode" placeholder="" disabled></el-input>
               </el-form-item>
             </el-col>
           </el-row>

            <el-row>
              <el-col :span="11" >
                <el-form-item label="邮寄快递单号：" prop="contractMailCode">
                  <el-input v-model="form1.contractMailCode" :maxlength="length.max20" placeholder="请输入邮寄快递单号" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="23">
                <el-form-item label="邮寄地址：">
                  <el-input v-model="form1.mailAddress" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <!--// 底部-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateMsg.code = -1">取 消</el-button>
          <el-button type="primary" @click="submitForm">提 交</el-button>
        </span>
      </el-dialog>
    </div>

    <!--、、信息员订单：申请开票-->
    <div >
      <el-dialog
        title="申请开票"
        width="45%"
        class="fns-el-dialog"
        :close-on-click-modal="false"
        :visible.sync="+updateMsg.code === 14 || +updateMsg.code === 16"
        :before-close="handleClose">
        <!--// 公司客户-->
        <div :span="24"  v-if="+updateMsg.customerType === 1 ">
          <el-form ref="formData4" :model="form4" :rules="rules" label-width="110px" style="margin-left:6px;">

            <el-row>
              <el-col :span="11">
                <el-form-item label="订单编号：">
                  <el-input v-model="form4.orderCode" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item label="经手销售：" >
                  <el-input v-model="form4.saleName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="经纪人：">
                  <el-input v-model="form4.brokerName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item label="公司名称：" prop="customerName">
                  <el-input v-model="form4.customerName" :maxlength="length.max50" placeholder="请输入公司名称" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11" class="itemNum">
                <el-form-item label="税号/统一社会信用代码：" prop="creditCode">
                  <el-input v-model="form4.creditCode" :maxlength="length.max18" placeholder="请输入税号" clearable></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1">
                <el-form-item label="开户行：" prop="bankOfDeposit">
                  <el-input v-model="form4.bankOfDeposit" :maxlength="length.max50" placeholder="请输入开户行" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="账号：" prop="account">
                  <el-input v-model="form4.account" placeholder="请输入账号" :maxlength="length.max20" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item label="公司电话：" prop="customerPhone">
                  <el-input v-model="form4.customerPhone" :maxlength="length.max14"placeholder="请输入公司电话" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="23">
                <el-form-item label="公司地址：" prop="customerAddress">
                  <el-input v-model="form4.customerAddress" :maxlength="length.max100" placeholder="请输入公司地址" clearable></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="23" style="margin-top: -10px">
                <el-form-item label="营业执照1：">
                  <div>
                    <a :href=" imgUrl + form4.businessLicenceUrl " target="_blank">{{ form4.businessLicenceUrl || ''}}</a>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="23" style="margin-top: -30px">
                <el-form-item label="公司开票：">
                  <div>
                    <a :href=" imgUrl + form4.billingInformationUrl " target="_blank">{{ form4.billingInformationUrl || ''}}</a>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="23" style="margin-top: -10px">
                <el-form-item label="备注：">
                  <el-input type="textarea" v-model="form4.remarks" :maxlength="length.max100" placeholder="请输入备注"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24" class="itemVIN" style="margin-top: -10px">
                <el-form-item label="VIN码：">
                  <div v-for="(item, index) in form4.vinCodes" :key="index">
                    <el-col :span="10"><a :href=" imgUrl + item " target="_blank">{{ item || ''}}</a></el-col>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="23" class="itemVIN" style="margin-top: -20px">
                <el-form-item label="订单台数：">
                  <el-col :span="10">{{ form4.orderTotalNumber || 0 }}</el-col>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="23" class="itemVIN" style="margin-top: -30px">
                <el-form-item label="单价（万元）：">
                  <el-col :span="10">{{ form4.commodityUnitPrice || 0 }}</el-col>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="23" class="itemVIN" style="margin-top: -30px">
                <el-form-item label="总价（万元）：">
                  <el-col :span="10">{{ form4.totalOrderPrice || 0 }}</el-col>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>

        <!--// 个人客户-->
        <div :span="24"  v-else>
          <el-form  ref="formData5" :model="form5.customers[0]" :rules="rules" label-width="110px" style="margin-left:6px;">
            <el-row>
              <el-col :span="11">
                <el-form-item label="订单编号：">
                  <el-input v-model="form5.orderCode " placeholder="" disabled ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item label="经手销售：">
                  <el-input v-model="form5.saleName" placeholder="" disabled ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11" >
                <el-form-item label="经纪人：" >
                  <el-input v-model="form5.brokerName " placeholder="" disabled ></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <!--// 客户管理-->
            <el-row class="fns-tabs">
              <el-col >
                <el-tabs v-model="activeName">
                  <el-tab-pane :label="'客户'+ (index + 1)" :span="24" :name="String(index)" v-for="(item, index) in form5.customers" :key="index">
                    <el-row>
                      <el-col :span="11">
                        <el-form-item label="个人姓名：" prop="customerName">
                          <el-input v-model="item.customerName" placeholder="请输入个人姓名" :maxlength="length.max10" clearable></el-input>
                        </el-form-item>
                      </el-col>

                      <el-col :span="11" :offset="1">
                        <el-form-item label="个人电话：" prop="customerPhone">
                          <el-input v-model="item.customerPhone" placeholder="请输入个人电话" :maxlength="length.max10" clearable></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="11">
                        <el-form-item label="身份证号："  prop="customerIdCard">
                          <el-input v-model="item.customerIdCard" placeholder="请输入身份证号" :maxlength="length.max18" required clearable></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="11">
                        <el-form-item label="身份证正面：">
                          <a href="imgUrl + item.customerBackUrl" target="_blank">{{ item.customerBackUrl || ''}}</a>
                        </el-form-item>
                      </el-col>
                      <el-col :span="11" :offset="1">
                        <el-form-item label="身份证反面：">
                          <a href="imgUrl + item.customerFrontUrl" target="_blank">{{ item.customerFrontUrl || ''}}</a>
                        </el-form-item>
                      </el-col>
                    </el-row>

                    <el-row>
                      <el-col :span="23"  style="margin-top: -30px;">
                        <el-form-item label="附加照片：" class="itemZp" >
                          <div><a href=" imgUrl + item.annexI " target="_blank">{{ item.annexI || ''}}</a></div>
                          <div style="line-height: 18px;margin-top: -10px;"><a href=" imgUrl + item.annexII " target="_blank">{{ item.annexII || ''}}</a></div>
                          <div style="line-height: 18px;"><a href=" imgUrl + item.annexIII " target="_blank">{{ item.annexIII || '' }}</a></div>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-tab-pane>
                </el-tabs>

              </el-col>
            </el-row>

            <el-row>
              <el-col :span="23" style="margin-top: 20px">
                <el-form-item label="备注：">
                  <el-input type="textarea" v-model="form5.remarks" :maxlength="length.max100" placeholder="请输入备注"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="24" class="itemVIN" style="margin-top: -10px">
                <el-form-item label="VIN码：">
                  <div v-for="(item, index) in form5.vinCodes" :key="index">
                    <el-col :span="10"><a :href=" imgUrl + item " target="_blank">{{ item || '' }}</a></el-col>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="7" class="itemVIN" style="margin-top: -20px">
                <el-form-item label="订单台数：">
                  <el-col :span="10">{{ form5.orderTotalNumber || '' }}</el-col>
                </el-form-item>
              </el-col>

              <el-col :span="7" class="itemVIN" :offset='1' style="margin-top: -20px">
                <el-form-item label="单价（万元）：">
                  <el-col :span="10">{{ form5.commodityUnitPrice || '' }}</el-col>
                </el-form-item>
              </el-col>

              <el-col :span="7" class="itemVIN" :offset='1' style="margin-top: -20px">
                <el-form-item label="总价（万元）：">
                  <el-col :span="10">{{ form5.totalOrderPrice || '' }}</el-col>
                </el-form-item>
              </el-col>

            </el-row>
          </el-form>
        </div>

        <!--// 底部-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateMsg.code = -1">取 消</el-button>
          <el-button type="primary" @click="submitForm">提 交</el-button>
        </span>
      </el-dialog>
    </div>

    <!--、、信息员订单：递交发票-->
    <div>
      <el-dialog
        title="递交发票"
        width="45%"
        class="fns-el-dialog"
        :close-on-click-modal="false"
        :visible.sync="+updateMsg.code === 17"
        :before-close="handleClose">
        <!--// body-->
        <div :span="24" >
          <el-form ref="formData6" :model="formData6" :rules="rules" label-width="100px" style="margin-left:6px;">

            <el-row>
              <el-col :span="11">
                <el-form-item label="订单编号：" >
                  <el-input v-model="form6.orderCode" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1">
                <el-form-item label="经手销售：" >
                  <el-input v-model="form6.saleName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

           <el-row>
             <el-col :span="11">
               <el-form-item label="经纪人：" >
                 <el-input v-model="form6.brokerName" placeholder="" disabled></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="11" class="itemNum" :offset="1">
               <el-form-item label=" 归还剩余资料方式：">
                 <el-radio-group v-model="form6.datumMailWay">
                   <el-radio :label="0">快递</el-radio>
                   <el-radio :label="1">其他方式</el-radio>
                 </el-radio-group>
               </el-form-item>
             </el-col>
           </el-row>

            <div v-if="+form6.datumMailWay === 0">
              <el-row>
                <el-col :span="11">
                  <el-form-item label="联系人姓名：" >
                    <el-input v-model="form6.customerName" placeholder="" disabled></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="11" :offset="1">
                  <el-form-item label="联系电话：" >
                    <el-input v-model="form6.customerPhone" placeholder="" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="23">
                  <el-form-item label="邮寄地址：">
                    <el-input v-model="form6.customerAddress" placeholder="" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="11">
                  <el-form-item label="邮寄快递单号：" prop="contractBackCode">
                    <el-input v-model="formData6.contractBackCode" placeholder="请输入邮寄快递单号" clearable :maxlength="length.max20"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

          </el-form>
        </div>

        <!--// 底部-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateMsg.code = -1">取 消</el-button>
          <el-button type="primary" @click="submitForm">提 交</el-button>
        </span>
      </el-dialog>
    </div>

    <!--、、信息员订单：审核上牌-->
    <div>
      <el-dialog
        title="审核上牌"
        width="40%"
        class="fns-el-dialog"
        :close-on-click-modal="false"
        :visible.sync="+updateMsg.code === 19"
        :before-close="handleClose">
        <!--// 公司客户-->
        <div :span="24">
          <el-form ref="formData3" :model="formData3" :rules="rules" label-width="110px" style="margin-left:6px;">
            <el-row>
              <el-col :span="11">
                <el-form-item label="订单编号：">
                  <el-input v-model="form3.orderCode" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="11" :offset="1">
                <el-form-item label="经手销售：">
                  <el-input v-model="form3.saleName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="经纪人：">
                  <el-input v-model="form3.brokerName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <div :span="23">
              <el-table
                v-loading="loading"
                :data="form3.tableData"
                border
                style="width: 100%">
                <el-table-column
                  prop="vinCode"
                  align="center"
                  width="120"
                  label="VIN码">
                </el-table-column>
                <el-table-column
                  prop="drivingUrl"
                  label="行驶证"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="registrationUrl"
                  label="登记证"
                  align="center ">
                </el-table-column>
                <el-table-column
                  prop="trafficInsurancePolicyUrl"
                  label="交强险保单"
                  align="center ">
                </el-table-column>
              </el-table>
              <!-- ========页码======-->
              <pages v-on:_pageChange="_pageChange" :total="total"></pages>
            </div>
            <el-row>
              <el-col :span="23" class="itemConfirm" style="margin-top: 20px">
                <el-form-item label="信息员确认情况：" prop="auditStatus" class="itemNum">
                  <el-radio-group v-model="formData3.auditStatus">
                    <el-radio :label="1">确认</el-radio>
                    <el-radio :label="0">驳回</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row v-if="formData3.auditStatus === 0">
              <el-col :span="23" style="margin-top: -10px">
                <el-form-item label="驳回原因：" prop="remarks">
                  <el-input type="textarea" v-model="formData3.remarks" placeholder="请填写原因"></el-input>
                </el-form-item>
              </el-col>
            </el-row>

          </el-form>
        </div>

        <!--// 底部-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateMsg.code = -1">取 消</el-button>
          <el-button type="primary" @click="submitForm">提 交</el-button>
        </span>
      </el-dialog>
    </div>

    <!--、、信息员订单：归还资料-->
    <div>
      <el-dialog
        title="归还资料"
        width="45%"
        class="fns-el-dialog"
        :close-on-click-modal="false"
        :visible.sync="+updateMsg.code === 21 && +updateMsg.saleType === 0"
        :before-close="handleClose">
        <!--// body-->
        <div :span="24">
          <el-form ref="formData2" :model="formData2" :rules="rules" label-width="110px" style="margin-left:6px;">

            <el-row>
              <el-col :span="11">
                <el-form-item label="订单编号：">
                  <el-input v-model="form2.orderCode" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" :offset="1">
                <el-form-item label="经手销售：">
                  <el-input v-model="form2.saleName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="11">
                <el-form-item label="经纪人：">
                  <el-input v-model="form2.brokerName" placeholder="" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11" class="itemNum" :offset="1">
                <el-form-item label=" 归还剩余资料方式：" prop="datumMailWay">
                  <el-radio-group v-model="formData2.datumMailWay">
                    <el-radio :label="0">快递</el-radio>
                    <el-radio :label="1">其他方式</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>

            <div v-if="+formData2.datumMailWay === 0">
              <el-row>
                <el-col :span="11">
                  <el-form-item label="联系人姓名：">
                    <el-input v-model="form2.customerName" placeholder="" disabled></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="11" :offset="1">
                  <el-form-item label="联系电话：">
                    <el-input v-model="form2.customerPhone" placeholder="" disabled></el-input>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="23">
                  <el-form-item label="邮寄地址：">
                    <el-input v-model="form2.customerAddress" placeholder="" disabled></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="11">
                  <el-form-item label="邮寄快递单号：" prop="contractBackCode">
                    <el-input v-model="formData2.contractBackCode" placeholder="请输入邮寄快递单号" clearable></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>

          </el-form>
        </div>

        <!--// 底部-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateMsg.code = -1">取 消</el-button>
          <el-button type="primary" @click="submitForm">提 交</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import * as api from '@/api/order'
  import { Message } from 'element-ui'
  import { mapState } from 'vuex'
  import pages from '@/components/page/page'

  export default {
    props: {
      updateMsg: {
        type: Object
      }
    },
    data() {
      return {
        loading: false,
        total: 0,
        disabled: '',
        modelTitle: '修改',
        dialogVisible: true,
        activeName: '0',
        length: {
          max10: 10,
          max14: 14,
          max18: 18,
          max20: 20,
          max50: 50,
          max60: 60,
          max100: 100
        },
        form1: { // 递交合同
          brokerName: '', // 经纪人名称 ,
          brokerPhone: '', // 经纪人电话 ,
          contactPhone: '',
          contractMailCode: ''
        },
        formData1: {
          orderId: '',
          contractMailCode: ''
        },
        form2: { // 归还资料
          brokerName: '', // 经纪人名称 ,
          contactPhone: ''
        },
        formData2: {
          orderId: '',
          datumMailWay: 0,
          contractBackCode: ''
        },
        form3: { // 审核上牌
          brokerName: '', // 经纪人名称 ,
          contactPhone: '',
          tableData: [],
          index: 1,
          size: 5
        },
        formData3: {
          orderId: '',
          auditStatus: undefined,
          remarks: ''
        },
        form4: { // // 申请开票（公司）
          brokerName: '', // 经纪人名称 ,
          customerName: '',
          creditCode: '',
          bankOfDeposit: '',
          account: '',
          customerPhone: '',
          customerAddress: '',
          remarks: ''
        },
        formData4: {
          orderId: '',
          customerName: '',
          creditCode: '',
          bankOfDeposit: '',
          account: '',
          customerPhone: '',
          customerAddress: '',
          remarks: ''
        },
        form5: { // 申请开票（个人）
          brokerName: '', // 经纪人名称 ,
          contactPhone: '',
          customers: [
            {
              annexI: '',
              annexII: '',
              annexIII: '',
              customerBackUrl: '',
              customerFrontUrl: '',
              customerIdCard: '',
              customerName: '',
              customerPhone: '',
              id: ''
            }
          ]
        },
        formData5: {
          orderId: ''
        },
        form6: { // 递交发票
          brokerName: '',
          datumMailWay: 0
        },
        formData6: {
          orderId: '',
          contractBackCode: '',
          datumMailWay: ''
        },
        formModel: {
          id: '',
          salesBrand: [],
          saleArea: [],
          account: '',
          psd: '',
          confirmPsd: '',
          placeArea: [],
          enterpriseType: [],
          brokerName: '',
          saleMode: [],
          companyAddress: '',
          contactName: '',
          contactPhone: '',
          mailAddress: '',
          saleUserId: '',
          remarks: '',
          status: ''
        },
        rules: {
          contractMailCode: [
            { required: true, message: '必填项，不能为空', trigger: 'blur' }
          ],
          datumMailWay: [
            { required: true, message: '必填项，不能为空', trigger: 'blur' }
          ],
          contractBackCode: [
            { required: true, message: '必填项，不能为空', trigger: 'blur' }
          ],
          remarks: [
            { required: true, message: '必填项，不能为空', trigger: 'blur' }
          ],
          auditStatus: [
            { required: true, message: '必填项，不能为空', trigger: 'change' }
          ],
          creditCode: [
            { required: true, message: '必填项，不能为空', trigger: 'blur' }
          ],
          bankOfDeposit: [
            { required: true, message: '必填项，不能为空', trigger: 'blur' }
          ],
          account: [
            { required: true, message: '必填项，不能为空', trigger: 'blur' }
          ],
          customerPhone: [
            { required: true, message: '必填项，不能为空', trigger: 'blur' }
          ],
          customerAddress: [
            { required: true, message: '必填项，不能为空', trigger: 'blur' }
          ],
          customerName: [
            { required: true, message: '必填项，不能为空', trigger: 'blur' }
          ],
          customerIdCard: [
            { required: true, message: '必填项，不能为空', trigger: 'blur' }
          ],
          mailAddress: [
            { required: true, message: '邮寄地址不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    watch: {
      dialogVisible() {
        if (this.$refs.formModel) {
          this.$refs.formModel.clearValidate()
        }
      }
    },
    components: {
      pages
    },
    created() {
      this.getlist()
    },
    computed: {
      ...mapState({
        imgUrl: state => state.userInfo.url
      })
    },
    methods: {
      // 分页
      _pageChange(val, flag) {
        // this.clearArrVal(this.list)
        console.log(flag)
        var arr = []
        if (flag === 'size') {
          this.form3.index = val
          this.getlist()
        } else {
          arr.push(val)
          this.form3.index = 1
          this.form3.size = arr[1]
          this.getlist()
        }
      },
      getlist() {
        console.log(this.updateMsg.code)
        var orderId = { orderId: +this.updateMsg.id }
        if (+this.updateMsg.code === 3 || +this.updateMsg.code === 10) {
          // 获取--递交合同
          api.contractModify(orderId).then((res) => {
            if (+res.code === 0) {
              this.form1 = res.data
            }
          })
        } else if (+this.updateMsg.code === 21 && +this.updateMsg.saleType === 0) {
          // 获取--归还资料
          api.backModify(orderId).then((res) => {
            if (+res.code === 0) {
              this.form2 = res.data
            }
          })
        } else if (+this.updateMsg.code === 19) {
          // 获取--审核上牌
          var data = {
            index: this.form3.index,
            size: this.form3.size,
            orderId: +this.updateMsg.id
          }
          api.billModify(data).then((res) => {
            if (+res.code === 0) {
              this.form3 = res.data
              this.form3.tableData = res.data.goodsInfoCheckBillList.rows
              this.total = +res.data.goodsInfoCheckBillList.total || this.total
              console.log(res.data)
            }
          })
        } else if (+this.updateMsg.code === 14 || +this.updateMsg.code === 16) {
          if (+this.updateMsg.customerType === 1) {
            // 获取--申请开票(公司)
            api.companyModify(orderId).then((res) => {
              if (+res.code === 0) {
                this.form4 = res.data
              }
            })
          } else if (+this.updateMsg.customerType === 2) {
            // 获取--申请开票(个人)
            api.personalModify(orderId).then((res) => {
              if (+res.code === 0) {
                this.form5 = res.data
              }
            })
          }
        } else if (+this.updateMsg.code === 17) {
          // 获取--递交发票
          api.invoiceModify(orderId).then((res) => {
            if (+res.code === 0) {
              res.data.datumMailWay = 0
              this.form6 = res.data
            }
          })
        }
      },
      // 保存--递交合同
      contractSave() {
        this.formData1.orderId = +this.updateMsg.id
        this.formData1.contractMailCode = this.form1.contractMailCode
        this.$refs['formData1'].validate((valid) => {
          if (valid) {
            api.contractSave(this.formData1).then((res) => {
              if (+res.code === 0) {
                this.updateMsg.code = false
                this.$emit('queryList')
              }
            })
          }
        })
      },
      // 保存--审核上牌
      billSave() {
        this.formData3.orderId = +this.updateMsg.id
        this.$refs['formData3'].validate((valid) => {
          if (valid) {
            api.billSave(this.formData3).then((res) => {
              if (+res.code === 0) {
                this.updateMsg.code = false
                this.$emit('queryList')
              }
            }).catch(err => {
              if (+err.code === 1020) {
                Message({
                  message: '该订单状态已改变，请关闭对话框并刷新订单列表',
                  type: 'warning',
                  duration: 2000
                })
              }
            })
          }
        })
      },
      // 保存--归还资料
      backSave() {
        this.formData2.orderId = +this.updateMsg.id
        this.$refs['formData2'].validate((valid) => {
          if (valid) {
            api.backSave(this.formData2).then((res) => {
              if (+res.code === 0) {
                this.updateMsg.code = false
                this.$emit('queryList')
              }
            })
          }
        })
      },
      // 保存--递交发票
      invoiceSave() {
        this.formData6.orderId = +this.updateMsg.id
        this.formData6.datumMailWay = this.form6.datumMailWay
        this.$refs['formData6'].validate((valid) => {
          if (valid) {
            api.invoiceSave(this.formData6).then((res) => {
              if (+res.code === 0) {
                this.updateMsg.code = false
                this.$emit('queryList')
              }
            }).catch(err => {
              if (+err.code === 1020) {
                Message({
                  message: '该订单状态已改变，请关闭对话框并刷新订单列表',
                  type: 'warning',
                  duration: 2000
                })
              }
            })
          }
        })
      },
      // 保存-申请开票(公司)
      companySave() {
        this.formData4.orderId = +this.updateMsg.id
        this.formData4.customerName = this.form4.customerName
        this.formData4.creditCode = this.form4.creditCode
        this.formData4.bankOfDeposit = this.form4.bankOfDeposit
        this.formData4.account = this.form4.account
        this.formData4.customerPhone = this.form4.customerPhone
        this.formData4.customerAddress = this.form4.customerAddress
        this.formData4.remarks = this.form4.remarks
        this.$refs['formData4'].validate((valid) => {
          if (valid) {
            api.companySave(this.formData4).then((res) => {
              if (+res.code === 0) {
                this.updateMsg.code = false
                this.$emit('queryList')
              }
            })
          }
        })
      },
      // 保存-申请开票(个人)
      personalSave() {
        this.formData5.orderId = +this.updateMsg.id
        this.formData5.customers = this.form5.customers
        this.formData5.remarks = this.form5.remarks || ''
        var arr = []
        for (var [index, item] of new Map(this.formData5.customers.map((item, i) => [i, item]))) {
          if (item.customerName === '' || item.customerPhone === '' || item.customerIdCard === '') {
            Message({
              message: '客户' + (index + 1) + '有必填项，不能为空',
              type: 'warning',
              duration: 2000
            })
            this.activeName = index + ''
            return
          }
        }
        this.formData5.customers.forEach(function(item, index) {
          var obj = {
            customerName: item.customerName || '',
            customerPhone: item.customerPhone || '',
            customerIdCard: item.customerIdCard || ''
          }
          arr.push(obj)
        })
        this.formData5.customers = arr
        api.personalSave(this.formData5).then((res) => {
          if (+res.code === 0) {
            this.updateMsg.code = false
            this.$emit('queryList')
          }
        })
      },
      submitForm() {
        if (+this.updateMsg.code === 3 || +this.updateMsg.code === 10) {
          this.contractSave()
        } else if (+this.updateMsg.code === 21 && +this.updateMsg.saleType === 0) {
          this.backSave()
        } else if (+this.updateMsg.code === 19) {
          this.billSave()
        } else if (+this.updateMsg.code === 14 || +this.updateMsg.code === 16) {
          if (+this.updateMsg.customerType === 1) {
            this.companySave()
          } else if (+this.updateMsg.customerType === 2) {
            this.personalSave()
          }
        } else if (+this.updateMsg.code === 17) {
          this.invoiceSave()
        }
      },
      handleClose(done) {
        this.updateMsg.code = -1
      },
      handleClick() {
        console.log(1)
      }
    }
  }
</script>
<style lang="scss">
  .msgOrder {
    position: relative;
    padding: 20px;
    .itemNum {
      .el-form-item__label {
        line-height: 18px;
      }
    }
    .el-dialog {
      .el-form-item__label {
        width: 120px!important;
      }
      .el-form-item__content {
        margin-left: 120px!important;
      }
      .itemVIN {
        .el-form-item__content {
          margin-top: 8px;
        }
        .el-col-10 {
          line-height: 20px;
        }
      }
    }
    .el-table {
      .el-table__body-wrapper {
        height: 100%;
        overflow-x: inherit;
      }
    }
    .el-tabs__nav {
      margin-left: 30px;
    }
    .itemZp {
      margin-bottom: 5px;
      .el-form-item__content {
        margin-top: 8px;
      }
      div {
        line-height: 20px;
      }
    }
    .modalCheckBox {
      .el-checkbox-group {
        line-height: 18px;
        margin-left: 20px;
        margin-top: -5px;
        .el-checkbox {
          .el-checkbox__label {
            font-size: 12px;
            color: #666;
          }
        }
      }
      .el-checkbox {
        margin-right: 20px;
      }
      .el-checkbox + .el-checkbox {
        margin-left: 0;
      }
    }
  }
</style>
